<template>
  <div class="app-container">
    <el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="关键词">
        <el-input clearable v-model="searchForm.keyword" placeholder="搜索"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button title="添加" type="success" @click="$router.push({ path: '/application/form' })">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="#" width="80">
        <template v-slot:default="{row}">
          {{ row.app_id }}
        </template>
      </el-table-column>

      <el-table-column label="图标" width="80" align="center">
        <template v-slot:default="{row}">
          <el-image v-if="row.icon" :src="row.icon" style="width: 30px;height: 30px" />
          <i v-else class="el-icon-box" style="font-size: 24px;"></i>
        </template>
      </el-table-column>

      <el-table-column align="center" label="应用名称" min-width="150">
        <template v-slot:default="{row}">
          {{ row.name }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="标识" width="120">
        <template v-slot:default="{row}">
          {{ row.app_tag }}
        </template>
      </el-table-column>

      <el-table-column label="版本" width="100" align="center">
        <template v-slot:default="{row}">
          {{ row.version }}
        </template>
      </el-table-column>

      <el-table-column label="状态" width="100" align="center">
        <template v-slot:default="{row}">
          <el-tag :type="row.status ? 'success' : 'danger'">
            {{ row.status ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="安装状态" width="100" align="center">
        <template v-slot:default="{row}">
          <el-tag :type="row.installed ? 'success' : 'warning'">
            {{ row.installed ? '已安装' : '未安装' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="更新时间" width="180" align="center">
        <template v-slot:default="{row}">
          <span>{{ row.updated_at }}</span>
        </template>
      </el-table-column>

      <el-table-column label="添加时间" width="180" align="center">
        <template v-slot:default="{row}">
          <span>{{ row.created_at }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作" width="250">
        <template v-slot:default="{row}">
          <el-row class="row-action-btns">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="$router.push({path:'/application/form',query:{id:row.app_id}})"
              title="编辑">
            </el-button>

            <el-button
              v-if="!row.installed"
              size="mini"
              type="success"
              icon="el-icon-download"
              circle
              @click="handleInstall(row)"
              title="安装">
            </el-button>

            <el-button
              v-if="row.installed && !row.status"
              size="mini"
              type="success"
              icon="el-icon-video-play"
              circle
              @click="handleEnable(row)"
              title="启用">
            </el-button>

            <el-button
              v-if="row.installed && row.status"
              size="mini"
              type="warning"
              icon="el-icon-video-pause"
              circle
              @click="handleDisable(row)"
              title="禁用">
            </el-button>

            <el-button
              v-if="row.installed"
              size="mini"
              type="info"
              icon="el-icon-refresh"
              circle
              @click="handleUpgrade(row)"
              title="更新">
            </el-button>

            <el-popconfirm
              title="确定要卸载该应用吗？"
              @confirm="handleUninstall(row)"
            >
              <el-button
                v-if="row.installed"
                size="mini"
                slot="reference"
                type="danger"
                icon="el-icon-delete"
                circle
                title="卸载"
              />
            </el-popconfirm>

            <el-popconfirm
              title="此操作将永久删除该应用, 是否继续?"
              @confirm="handleDelete(row.app_id)"
            >
              <el-button
                size="mini"
                slot="reference"
                type="danger"
                icon="el-icon-delete"
                circle
                title="删除"
              />
            </el-popconfirm>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
  </div>
</template>

<script>
import api from '@/api/application'
import Pagination from '@/components/Pagination'

export default {
  name: 'ApplicationIndex',
  components: {
    Pagination
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        sort: ''
      },
      searchForm: {
        keyword: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      api.getList(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    search() {
      this.listQuery.page = 1
      this.listQuery = Object.assign(this.listQuery, this.searchForm)
      this.fetchData()
    },
    handleDelete(id) {
      api.del({ id: id }).then((res) => {
        this.fetchData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '删除失败!'
        })
      })
    },
    handleInstall(row) {
      this.$confirm(`确定要安装应用 "${row.name}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.install({ id: row.app_id }).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '安装成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '安装失败!'
          })
        })
      })
    },
    handleUninstall(row) {
      api.uninstall({ id: row.app_id }).then((res) => {
        this.fetchData()
        this.$message({
          type: 'success',
          message: '卸载成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '卸载失败!'
        })
      })
    },
    handleEnable(row) {
      api.enable({ id: row.app_id }).then((res) => {
        this.fetchData()
        this.$message({
          type: 'success',
          message: '启用成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '启用失败!'
        })
      })
    },
    handleDisable(row) {
      api.disable({ id: row.app_id }).then((res) => {
        this.fetchData()
        this.$message({
          type: 'success',
          message: '禁用成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '禁用失败!'
        })
      })
    },
    handleUpgrade(row) {
      this.$confirm(`确定要更新应用 "${row.name}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.upgrade({ id: row.app_id }).then((res) => {
          this.fetchData()
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '更新失败!'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
.row-action-btns .el-button {
  margin-right: 5px;
}
</style>
